<%@page import="java.util.ArrayList"%>
<%@page import="java.math.MathContext"%>
<%@ page import="java.util.List" %>
<%@ page import="com.google.appengine.api.datastore.DatastoreServiceFactory" %>
<%@ page import="com.google.appengine.api.datastore.DatastoreService" %>
<%@ page import="com.google.appengine.api.datastore.Query" %>
<%@ page import="com.google.appengine.api.datastore.Entity" %>
<%@ page import="com.google.appengine.api.datastore.FetchOptions" %>
<%@ page import="com.google.appengine.api.datastore.Key" %>
<%@ page import="com.google.appengine.api.datastore.KeyFactory" %>
<%@ page import="com.google.appengine.api.datastore.Query" %>
<%@ page import="com.google.appengine.api.datastore.Query.FilterOperator" %>

<script type="text/javascript" src="js/AjaxMultipleUpdate.js"></script>
<style>
#mediaList_controls{
	padding:5px;
 /*background-color: #aaa;*/
 margin:20px 0px;
  border-top: 1px solid #aaa;
 border-bottom: 1px solid #aaa;
}
</style>
<script type="text/javascript">



/* function addEvent(obj, evType, fn){ 
	
	if (obj.addEventListener){ 
   		obj.addEventListener(evType, fn, false); 
   		return true; 
 	} else if (obj.attachEvent){ 
   		var r = obj.attachEvent("on"+evType, fn); 
   		return r; 
 	} else { 
   		return false; 
 	} 
}
 
addEvent(window, 'load', initCheckboxes);
 
function initCheckboxes() {
	addEvent(document.getElementById('all'), 'click', setCheckboxes);
} */

var keys = new Array();

function selectAll(div, count) {
	if (div.checked) {
		for (var i=1; i <= count; i++) {
			var checkBox = document.getElementById("checkBox"+i);
			checkBox.checked = true;
			updateCheckBoxes(checkBox);
		}
	} else {
		for (var i=1; i <= count; i++) {
			var checkBox = document.getElementById("checkBox"+i);
			checkBox.checked = false;
			updateCheckBoxes(checkBox);
		}
	}
}

function updateCheckBoxes(div) {
	if (div.checked) {
		keys.push(div.value);
	} else {
		for (var i=0; i < keys.length; i++) {
			if (keys[i] == div.value) {
				var firstArray = keys.slice(0, i);
				var secondArray = keys.slice(i+1, keys.length);
				keys = firstArray.concat(secondArray);
			}
		}
	}
	document.getElementById("keys_array2").value = keys;
	document.getElementById("keys_array1").value = keys;
	document.getElementById("keys_array0").value = keys;
}

function checkEmpty() {
	return (keys.length != 0);
}

/* function setCheckboxes() {
	var selectDelete = document.getElementById('checkBoxes').getElementsByTagName('input');
 	
	for (var i = 0; i < selectDelete.length; i++) {
		selectDelete[i].checked = document.getElementById('all').checked;
	}
} */

function update(div) {
	var list = div.parentNode.parentNode.childNodes;
	list.item(18).nextSibling.firstChild.style.display = "block";
}
function closePopUpWindow(div) {
	var box = div.parentNode.parentNode.parentNode.parentNode;
	box.style.display = "none";
}
</script>
<html>
	<body>
	<%
			DatastoreService datastore = DatastoreServiceFactory.getDatastoreService();
			Key accountKey = KeyFactory.createKey("AudioFiles", "mediaFiles");
			String selectedType = request.getParameter("mediaType");
			Query query;
			if (request.getParameter("mediaType") == null) {
				query = new Query("Audio", accountKey).addFilter("user", FilterOperator.EQUAL, (String)session.getAttribute("username")).addSort("mediaName", Query.SortDirection.ASCENDING);
			} else {
				query = new Query("Audio", accountKey).
						addFilter("user", FilterOperator.EQUAL, (String)session.getAttribute("username")).
						addSort("mediaName", Query.SortDirection.ASCENDING).
						addFilter("contentType", FilterOperator.EQUAL, selectedType);
			}
			
			List<Entity> uploadedAudioFiles = datastore.prepare(query).asList(FetchOptions.Builder.withLimit(20));
			String DeleteAll[];
			%>
			
			<table class="table2">
				<thead>
					<tr style="background-color: gray;">
						<div class="checkBoxes">
							<th style="width:30px;">
								<div class="all">
									<input type="checkbox" id="all" name="selectList" value="1" onchange="selectAll(this, <%= uploadedAudioFiles.size() %>)"/>
								</div>
							</th>
						</div>
						<th style="width: 250px;">Name</th>
						<th style="width: 200px;">Media Size</th>
						<th style="width: 200px;">Album / Collection</th>
						<th style="width: 250px;">Date Created</th>
						<th style="width: 200px;">Media Type</th>
						<th><img src="images/trash_bin.png" style="width: 40px; height: 40px;" alt="" /></th>
						<th><img src="images/download.png" style="width: 40px; height: 40px;" alt="" /></th>
						<th><img src="images/upload.png" style="width: 40px; height: 40px;" alt="" /></th>
					</tr>
				</thead>
			<tbody>
			<%
			if (uploadedAudioFiles.isEmpty()) {
				%>
				<tr>
				<td colspan="8" scope="row" align="center" width="50%" height="100%" style="padding:20px;"> No <%=request.getParameter("mediaType") %> files has been uploaded</td>
				</tr>
				<%
			} else {
				int count = 0;
				for (Entity file: uploadedAudioFiles) {
					String keyParameter = KeyFactory.keyToString(file.getKey());
					Integer fileSize = Integer.parseInt(file.getProperty("fileSize").toString());
					count++;
					%>
					<tr>
						<div class="checkBoxes" id="checkBoxes">
							<td>
								<input type="checkbox" id="checkBox<%= count %>" name="selectList[]" value="<%= keyParameter %>" onchange="updateCheckBoxes(this)"/>
							</td>
						</div>
						<td><%= file.getProperty("mediaName") %></td>
						<td><%=fileSize/1024 %> KB</td>
						<%
						if (file.getProperty("contentType").equals("video")) {
							%>
							<td><%= file.getProperty("collection") %></td>
							<%
						} else {
							%>
							<td><%= file.getProperty("album") %></td>
							<%
						}
						%>
						<td><%= file.getProperty("dateCreated") %></td>
						<td><%= file.getProperty("contentType") %></td>
						<td><a type="button" href="/delete?entityKey=<%= keyParameter %>">Delete</a></td>
						<td><a href="/download?entityKey=<%= keyParameter %>">Download</a></td>
						<td><a href="#" onclick="update(this)">Edit</a></td>
						<td><div class="wrapper" style="display: none">
	    					<div id="updateBox"></div>
		   					<div id="updateFile">
								<h3>Update File</h3>
								<div id="leftSide">
									<img src="images/upload.png" alt="" style="width: 148px; height: 148px;" />
								</div>
								<form method="post" action="/update?entityKey=<%= keyParameter %>">
									<div class="inputSection">Media Name: <input id="mediaNameID" type="text" name="name" value="<%= file.getProperty("mediaName") %>" /></div>
									<%
									if (file.getProperty("contentType").equals("video")) {
										%>
										<div class="inputSection">Genre: <input id="genreID" type="text" name="genre" value="<%= file.getProperty("genre") %>" /></div>
										<div class="inputSection">Year: <input id="yearID" type="text" name="year" value="<%= file.getProperty("year") %>" /></div>
										<div class="inputSection">Collection: <input id="collectionID" type="text" name="collection" value="<%= file.getProperty("collection") %>" /></div>
										<%
									} else if (file.getProperty("contentType").equals("audio")) {
										%>
										<div class="inputSection">Artist: <input id="artistID" type="text" name="artist" value="<%= file.getProperty("artist") %>" /></div>
										<div class="inputSection">Album: <input id="albumID" type="text" name="album" value="<%= file.getProperty("album") %>" /></div>
										<div class="inputSection">Genre: <input id="genreID" type="text" name="genre" value="<%= file.getProperty("genre") %>" /></div>
										<%
									} else {
										%>
										<div class="inputSection">Album: <input id="albumID" type="text" name="album" value="<%= file.getProperty("album") %>" /></div>
										<%
									}
									%>
									<div style="float:left; margin:10px 20px 0px 0px;">
										<button type="submit" name="btnUpdate">Update File</button>
									</div>
									<div style="float:left; margin-top:10px;">
										<button type="button" onClick="closePopUpWindow(this)">Cancel</button>
									</div>
								</form>
							</div>
						</div></td>
					</tr>
					<%
				}
			}
			%>
			</tbody>
			</table>
	</body>
</html>